<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>菜单栏</title>
    <meta th:include="common/commons :: layui"/>

    <!-- layui 公用样式 -->
    <style>
        .layui-nav-itemed{border-left:5px solid #009688 !important; background:#4e5465}
        .layui-nav-item{border-left:5px solid rgba(0,0,0,0)}
        .layui-nav-tree .layui-nav-more{right:15px;}
    </style>
</head>
<body>
<ul class="layui-nav layui-nav-tree layui-nav-side"  lay-shrink="all" style="width: 220px; background-color: #999999;" lay-filter="menu">
    <li th:each="m,stat:${menus}"
        th:class="@{${m.open}? 'layui-nav-item layui-nav-itemed':'layui-nav-item'}">
        <a th:href="@{${m.menuUrl}}" th:inline="text" th:if="${#lists.isEmpty(m.childMenus)}" target="main">
            <i class="layui-icon layui-icon-set-fill"></i> <span>[[${m.menuName}]]</span>
        </a>
        <a href="javascript:" th:inline="text" th:unless="${#lists.isEmpty(m.childMenus)}" >
            <i class="layui-icon layui-icon-set-fill"></i> <span>[[${m.menuName}]]</span>
        </a>
        <dl class="layui-nav-child" th:if="${m.childMenus != null}">
            <dd th:class="@{${child.open}? 'layui-this':''}"
                th:each="child,childState:${m.childMenus}">
                <a th:href="@{${child.menuUrl}}" target="main">
                    <span style="padding-left:22px;" th:text="${child.menuName}"></span>
                </a>
            </dd>
        </dl>
    </li>
</ul>
<script th:inline="javascript">
    /* <![CDATA[ */
    layui.use('element', function() {
        var element = layui.element;
        element.on("nav(menu)", function(e) {
        })
    })
    /*  ]]> */
</script>
</body>
</html>